<template>
    <div>
        <div slot="header" class="themeSet">
            <b>主题风格设置</b>
        </div>
        <div class="themeContent">
            <div class="i-layout-header-setting-item">
                <Tooltip content="暗色侧边栏" placement="top">
                    <div
                        class="i-layout-header-setting-item-radio"
                        :class="topHeaderValue == 'dark' ? 'on' : ''"
                        @click="topHeader('dark')"
                    >
                        <div class="ivu-tooltip">
                            <div class="ivu-tooltip-rel">
                                <img src="../../../../assets/images/theme/nav-theme-dark.svg" />
                            </div>
                        </div>
                    </div>
                </Tooltip>
                <Tooltip content="蓝色侧边栏" placement="top">
                    <div
                        class="i-layout-header-setting-item-radio"
                        :class="topHeaderValue == 'light' ? 'on' : ''"
                        @click="topHeader('light')"
                    >
                        <div class="ivu-tooltip">
                            <div class="ivu-tooltip-rel">
                                <img src="../../../../assets/images/theme/blueTheme.png" />
                            </div>
                        </div></div
                ></Tooltip>
            </div>

            <div class="i-layout-header-setting-item">
                <Tooltip content="白色顶栏" placement="top">
                    <div
                        class="i-layout-header-setting-item-radio"
                        :class="topBackValue == 'white' ? 'on' : ''"
                        @click="topBackChange('white')"
                    >
                        <div class="ivu-tooltip">
                            <div class="ivu-tooltip-rel">
                                <img src="../../../../assets/images/theme/nav-theme-dark.svg" />
                            </div>
                        </div></div
                ></Tooltip>
                <Tooltip content="暗色顶栏" placement="top">
                    <div
                        class="i-layout-header-setting-item-radio"
                        :class="topBackValue == 'gray' ? 'on' : ''"
                        @click="topBackChange('gray')"
                    >
                        <div class="ivu-tooltip">
                            <div class="ivu-tooltip-rel">
                                <img src="../../../../assets/images/theme/header-theme-dark.svg" />
                            </div>
                        </div></div
                ></Tooltip>
                <Tooltip content="蓝色顶栏" placement="top">
                    <div
                        class="i-layout-header-setting-item-radio"
                        :class="topBackValue == 'blue' ? 'on' : ''"
                        @click="topBackChange('blue')"
                    >
                        <div class="ivu-tooltip">
                            <div class="ivu-tooltip-rel">
                                <img src="../../../../assets/images/theme/header-theme-primary.svg" />
                            </div>
                        </div></div
                ></Tooltip>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            topHeaderValue: 'dark',
            topBackValue: 'white'
        }
    },

    methods: {
        // 顶部背景色切换
        topBackChange(color) {
            this.topBackValue = color
            if (color == 'white') {
                document.getElementsByClassName('ivu-layout-header')[0].classList.remove('ivu-layout-header-gray')
                document.getElementsByClassName('ivu-layout-header')[0].classList.remove('ivu-layout-header-blue')
                document.getElementsByClassName('ivu-layout-header')[0].classList.add('ivu-layout-header-white')
            }
            if (color == 'gray') {
                document.getElementsByClassName('ivu-layout-header')[0].classList.remove('ivu-layout-header-white')
                document.getElementsByClassName('ivu-layout-header')[0].classList.remove('ivu-layout-header-blue')
                document.getElementsByClassName('ivu-layout-header')[0].classList.add('ivu-layout-header-gray')
            }
            if (color == 'blue') {
                document.getElementsByClassName('ivu-layout-header')[0].classList.remove('ivu-layout-header-white')
                document.getElementsByClassName('ivu-layout-header')[0].classList.remove('ivu-layout-header-gray')
                document.getElementsByClassName('ivu-layout-header')[0].classList.add('ivu-layout-header-blue')
            }
        },
        topHeader(darkOrLight) {
            this.topHeaderValue = darkOrLight
            this.$emit('getTheme', darkOrLight)
            if (darkOrLight == 'dark') {
                document.getElementsByClassName('left-sider')[0].classList.remove('ivu-layout-sider-light')
                document.getElementsByClassName('left-sider')[0].classList.add('ivu-layout-sider')
                try {
                    document
                        .getElementsByClassName('left-sider')[0]
                        .getElementsByClassName('ivu-layout-sider-children')[0]
                        .getElementsByClassName('side-menu-wrapper')[0]
                        .getElementsByClassName('ivu-menu')[0]
                        .classList.add('ivu-menu-dark')
                } catch (error) {
                    console.log(error)
                }
            } else {
                document.getElementsByClassName('left-sider')[0].classList.remove('ivu-layout-sider')
                document.getElementsByClassName('left-sider')[0].classList.add('ivu-layout-sider-light')
                try {
                    document
                        .getElementsByClassName('left-sider')[0]
                        .getElementsByClassName('ivu-layout-sider-children')[0]
                        .getElementsByClassName('side-menu-wrapper')[0]
                        .getElementsByClassName('ivu-menu')[0]
                        .classList.remove('ivu-menu-dark')
                } catch (error) {
                    console.log(error)
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.themeSet {
    height: 35px;
    line-height: 25px;
    border-bottom: 1px solid #e0e0e0;
}
.themeContent {
    padding-top: 20px;
    .i-layout-header-setting-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        .i-layout-header-setting-item-radio {
            display: inline-block;
            position: relative;
            margin-right: 16px;
            cursor: pointer;
            .ivu-tooltip {
                box-sizing: border-box;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                display: inline-block;
            }
        }
        .i-layout-header-setting-item-radio.on:after {
            background: #19be6b;
        }
        .i-layout-header-setting-item-radio:after {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: transparent;
            margin: 0 auto;
        }
    }
}
</style>
